import React, { useState, useEffect } from "react";
import {
  Table,
  Button,
  Modal,
  Space,
  message,
  Card,
  Tag,
  Descriptions,
  Typography,
  Spin,
} from "antd";
import { EyeOutlined } from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";
import dayjs from "dayjs";
import { AdminControllerService } from "../api";

const { Text } = Typography;

interface ReportData {
  id?: string;
  phoneNum?: string;
  context?: string;
  createTime?: string;
}

const ReportManagement: React.FC = () => {
  const [reports, setReports] = useState<ReportData[]>([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectedReport, setSelectedReport] = useState<ReportData | null>(null);
  const [tableLoading, setTableLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  // 加载举报列表
  const loadReports = async (current = 1, size = 10) => {
    try {
      setTableLoading(true);
      const response = await AdminControllerService.reportListUsingGet(
        current,
        size
      );
      if (response.data) {
        setReports(response.data.records || []);
        setPagination({
          current: response.data.current || 1,
          pageSize: response.data.size || 10,
          total: response.data.total || 0,
        });
      } else {
        message.error("获取举报列表失败");
      }
    } catch (error) {
      console.error("加载举报列表失败:", error);
      message.error("获取举报列表失败");
    } finally {
      setTableLoading(false);
    }
  };

  useEffect(() => {
    loadReports();
  }, []);

  // 由于API没有提供举报状态和处理功能，这里只显示举报信息
  // 如果后续API支持状态管理，可以添加相应功能

  const columns: ColumnsType<ReportData> = [
    {
      title: "举报手机号",
      dataIndex: "phoneNum",
      key: "phoneNum",
    },
    {
      title: "举报内容",
      dataIndex: "context",
      key: "context",
      render: (content: string) => (
        <Text ellipsis={{ tooltip: content }} style={{ maxWidth: 300 }}>
          {content}
        </Text>
      ),
    },
    {
      title: "举报时间",
      dataIndex: "createTime",
      key: "createTime",
      sorter: (a, b) => {
        if (!a.createTime || !b.createTime) return 0;
        return dayjs(a.createTime).unix() - dayjs(b.createTime).unix();
      },
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="primary"
            size="small"
            icon={<EyeOutlined />}
            onClick={() => handleView(record)}
          >
            查看详情
          </Button>
        </Space>
      ),
    },
  ];

  const handleView = (report: ReportData) => {
    setSelectedReport(report);
    setIsModalVisible(true);
  };

  // 由于API暂不支持举报处理功能，暂时移除处理逻辑
  // 如果后续API支持，可以添加相应的处理函数

  const handleModalCancel = () => {
    setIsModalVisible(false);
    setSelectedReport(null);
  };

  return (
    <Card title="举报管理">
      <Table
        columns={columns}
        dataSource={reports}
        rowKey="id"
        loading={tableLoading}
        pagination={{
          current: pagination.current,
          pageSize: pagination.pageSize,
          total: pagination.total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条记录`,
          onChange: (page, size) => {
            loadReports(page, size);
          },
          onShowSizeChange: (current, size) => {
            loadReports(1, size);
          },
        }}
      />

      <Modal
        title="举报详情"
        open={isModalVisible}
        onCancel={handleModalCancel}
        footer={[
          <Button key="close" onClick={handleModalCancel}>
            关闭
          </Button>,
        ]}
        width={600}
      >
        {selectedReport && (
          <Descriptions column={1} bordered>
            <Descriptions.Item label="举报手机号">
              {selectedReport.phoneNum || "-"}
            </Descriptions.Item>
            <Descriptions.Item label="举报内容">
              <div style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
                {selectedReport.context || "-"}
              </div>
            </Descriptions.Item>
            <Descriptions.Item label="举报时间">
              {selectedReport.createTime || "-"}
            </Descriptions.Item>
          </Descriptions>
        )}
      </Modal>
    </Card>
  );
};

export default ReportManagement;
